const { defineConfig } = require('@vue/cli-service')
const path = require('path');
module.exports = defineConfig({
  transpileDependencies: true,
  // resolve: {
  //   alias: {
  //     "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
  //   },
  // },
  // css: {
  //   preprocessorOptions: {
  //     scss: {
  //       javascriptEnabled: true,
  //       additionalData: '@import "./src/styles/variable.scss";',
  //     },
  //   },
  // },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'));

    config.module
      .rule('scss')
      .oneOf('normal')
      .use('sass-loader')
      .loader('sass-loader')
      .tap(options => ({
        ...options,
        additionalData: `@import "@/styles/variable.scss";`
      }));

    config.module
      .rule('scss')
      .oneOf('vue-modules')
      .use('sass-loader')
      .loader('sass-loader')
      .tap(options => ({
        ...options,
        prependData: `@import "@/styles/variable.scss";`
      }));
  },
  devServer: {
    proxy: {
      '/': {
        target: 'http://192.168.2.128:8888',
        changeOrigin: true,
        ws: false
      }
    }
  },
  configureWebpack: {
    resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: require.resolve('ts-loader'),
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
            transpileOnly: true
          }
        }
      ]
    }
  },
  publicPath: "/"
})
